<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆大数据平台</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <div class="weatherbox">多云&nbsp;&nbsp;&nbsp;21°</div>
        <h1>图书馆大数据平台</h1>
        <div class="timebox">
            <span>15:28:09</span>
            <i>&nbsp;&nbsp;&nbsp;&nbsp;星期二 2023/10/31</i>
        </div>
    </header>
    <div class="maincontent">
        <!-- 入馆趋势 -->
        <div class="panel">
            <!-- 入馆趋势头部 -->
            <div class="attendanceTrend">
                <h3>入馆趋势</h3>
                <i>开馆闭关时间: 08:00-20:00</i>
            </div>
            <!-- 入馆趋势echarts图表 -->
            <div class="attendanceTrendBar">
                <div class="attendanceTrendBarBox">
                    <ul>
                        <li>1000</li>
                        <li>800</li>
                        <li>600</li>
                        <li>400</li>
                        <li>200</li>
                        <li>0</li>
                    </ul>
                    <ul>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                        <li>
                            <span>
                                <i>
                                    <img src="./images/person_data_tip.png" alt="" srcset="">
                                </i>
                            </span>
                            <span>08:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 入馆趋势下半部分 -->
            <div class="attendanceTrendBottom">
                <ul class="pavilionNum">
                    <li>
                        <span>当天到馆人次</span>
                        <span>
                            <i>990&nbsp;</i>
                            <span>人</span>
                        </span>
                    </li>
                    <li>
                        <span>当天到馆人次</span>
                        <span>
                            <i>990&nbsp;</i>
                            <span>人</span>
                        </span>
                    </li>
                    <li>
                        <span>当天到馆人次</span>
                        <span>
                            <i>990&nbsp;</i>
                            <span>人</span>
                        </span>
                    </li>
                    <li>
                        <span>当天到馆人次</span>
                        <span>
                            <i>990&nbsp;</i>
                            <span>人</span>
                        </span>
                    </li>
                </ul>
                <div class="serveNum">
                    <ul>
                        <li>
                            <img src="../images/service_time1.png" alt="">
                        </li>
                        <li>
                            <img src="../images/service_time2.png" alt="">
                        </li>
                    </ul>
                    <div class="serveNumRight">
                        <div>
                            <p>本年服务人次</p>
                            <ul>
                                <li>5</li>
                                <li>2</li>
                                <li>2</li>
                                <li>1</li>
                                <li>0</li>
                            </ul>
                        </div>
                        <div>
                            <p>本月服务人次</p>
                            <ul>
                                <li>5</li>
                                <li>2</li>
                                <li>2</li>
                                <li>1</li>
                                <li>0</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="spinningPerspective">
            <div class="spinningPerspectiveTitle">热门推荐</div>
            <ul>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP1</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP2</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP3</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP4</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP5</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP6</span>
                </li>
                <li>
                    <h4>《社会心理学》</h4>
                    <i>借阅数1000</i>
                    <img src="./images/borrow_1.png" alt="">
                    <span>TOP7</span>
                </li>
            </ul>
        </div>
        <!-- 借阅排行区域 -->
        <div class="panel lendingRanking">
            <h4>借阅排行</h4>
            <ul>
                <ul>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>
                    <li>
                        <span>01</span>
                        <span>张某某</span>
                        <span>
                            <i>院系：</i>
                            <span>物理系</span>
                        </span>
                        <span>
                            <i>借阅量：</i>
                            <span>30次</span>
                        </span>
                        <span>
                            <i>入馆量：</i>
                            <span>30次</span>
                        </span>
                    </li>

                </ul>
            </ul>
        </div>
        <!-- 借阅趋势 -->
        <div class="panel borrowingTrend">
            <h4>借阅趋势</h4>
            <ul class="borrowingNum">
                <li>
                    <span>今日借阅量</span>
                    <span>
                        <i>1158</i>
                        <span>本</span>
                    </span>
                </li>
                <li>
                    <span>本周借阅量</span>
                    <span>
                        <i>1158</i>
                        <span>本</span>
                    </span>
                </li>
                <li>
                </li>
                <li>
                    <span>年度借阅量</span>
                    <span>
                        <i>1158</i>
                        <span>本</span>
                    </span>
                </li>
                <li>
                    <span>累计借阅量</span>
                    <span>
                        <i>1158</i>
                        <span>本</span>
                    </span>
                </li>
            </ul>
            <!-- 借阅趋势柱状图 -->
            <div class="dingwei">
                <div class="borrowingBar">

                </div>
                <ul class="ulqingkkuang">
                    <li>
                        <i></i>
                        <span>借出</span>
                    </li>
                    <li>
                        <i></i>
                        <span>还入</span>
                    </li>
                </ul>
            </div>


            <!-- 借出情况，还出情况 -->
            <div class="loanAndReturn">
                <div class="LendTheSituation">
                    <span>
                        <i></i>
                        <span>借出情况</span>
                    </span>
                    <ul>
                        <li>
                            <span>今日借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>昨日借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>本周借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>本年借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="AlsoIntoSituation">
                    <span>
                        <i></i>
                        <span>还入情况</span>
                    </span>
                    <ul>
                        <li>
                            <span>今日借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>昨日借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>本周借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                        <li>
                            <span>本年借出</span>
                            <span>
                                <span>1100</span>
                                <i>本</i>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 实时借阅、年度统计、本馆风采 -->
        <div class="realTimeBorrowing">
            <!-- 实时借阅 -->
            <div class="realTimeBorrowingBox">
                <h4>实时借阅</h4>
                <!-- 轮播图片 -->
                <div class="bookList">
                    <img src="./images/borrow_2.png" alt="">
                    <img src="./images/borrow_3.png" alt="">
                    <img src="./images/borrow_4.png" alt="">
                    <img src="./images/borrow_5.png" alt="">
                    <img src="./images/borrow_2.png" alt="">
                </div>
                <!-- 借书时间 -->
                <div class="bookTime">
                    <div class="bookTimeLine"></div>
                    <ul>
                        <li>
                            <span>1秒前</span>
                            <i>《埃隆马斯克传记》被借走</i>
                        </li>
                        <li>
                            <span>2秒前</span>
                            <i>《埃隆马斯克传记》被借走</i>
                        </li>
                        <li>
                            <span>3秒前</span>
                            <i>《埃隆马斯克传记》被借走</i>
                        </li>
                        <li>
                            <span>4秒前</span>
                            <i>《埃隆马斯克传记》被借走</i>
                        </li>
                        <li>
                            <span>5秒前</span>
                            <i>《埃隆马斯克传记》被借走</i>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="museum">
                <div class="annualStatistics">
                    <h4>年度统计</h4>
                    <div class="annualStatisticsBox">
                        <div class="iconfontDong">
                            <img src="./images/annual_tips.png" alt="">
                        </div>
                        <ul>
                            <li>
                                <i>本年度借还总数</i>
                                <h4>4852</h4>
                                <span>
                                    <i></i>
                                </span>
                            </li>
                            <li>
                                <i>本年度借还总数</i>
                                <h4>4852</h4>
                                <span>
                                    <i></i>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="styleMuseum">
                    <h4>本馆风采</h4>
                    <div class="styleMuseumPhoto">
                        <img src="./images/library_show_1.png" alt="">
                    </div>

                </div>
            </div>
        </div>
        <!-- 五大类馆藏占比、流通占比 -->
        <div class="museumPie">
            <!-- 馆藏占比 -->
            <div class="CollectionProportion">
                <h4>五大类馆藏占比</h4>
                <div class="CollectionProportionBox">
                    <div class="imgBg">
                        种类占比
                    </div>
                    <div class="originBox">
                        <i>自然科学</i>
                        <span>25%</span>
                    </div>
                    <div class="purpleBox">
                        <i>哲学</i>
                        <span>25%</span>
                    </div>
                    <div class="yellowBox">
                        <i>哲学</i>
                        <span>25%</span>
                    </div>
                    <div class="blueBox">
                        <i>哲学</i>
                        <span>25%</span>
                    </div>
                    <div class="greenBox">
                        <i>自然科学</i>
                        <span>25%</span>
                    </div>
                </div>
            </div>
            <!-- 流通占比 -->
            <div class="CirculationProportion">
                <h4>流通占比</h4>
                <div class="CirculationProportionBox">
                    <div class="degbg1"></div>
                    <div class="degbg2"></div>
                    <div class="CirculationProportionBoxBie"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/flexible.js"></script>
    <script src="./js/eharts.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>